<template>
  <div class="app-container">
    <!-- 左侧边栏 -->
    <Sidebar />

    <!-- 主聊天区域 -->
    <div class="main-content">
      <div class="chat-container">
        <!-- 聊天记录区域 -->
        <div class="messages">
          <div v-for="(msg, index) in messages" :key="index" :class="['message', msg.sender]">
            <div class="avatar">{{ msg.sender === 'user' ? '👤' : '🤖' }}</div>
            <div class="content"><div class="auto-break">{{ msg.text }}</div></div>
          </div>
        </div>

        <!-- 输入区域 -->
        <form @submit.prevent="sendMessage" class="input-form">
          <textarea
            v-model="inputText"
            placeholder="输入你的问题..."
            rows="1"
            @input="autoResize"
            ref="textareaRef"
            required
          ></textarea>
          <button type="submit">发送</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import Sidebar from '@/components/Sidebar.vue'
import { ref, computed, nextTick } from 'vue'

// 聊天消息列表
const messages = ref([
  {
    sender: 'ai',
    text: '你好！我是你的 AI 助手。有什么可以帮你的吗？'
  }
])

// 用户输入内容
const inputText = ref('')

// 文本框引用
const textareaRef = ref(null)

// 是否允许发送
const canSend = computed(() => inputText.value.trim().length > 0)

// 自动调整高度
const autoResize = () => {
  const textarea = textareaRef.value
  textarea.style.height = 'auto'
  textarea.style.height = textarea.scrollHeight + 'px'
}

// 发送消息
const sendMessage = () => {
  if (!canSend.value) return

  // 添加用户消息
  messages.value.push({
    sender: 'user',
    text: inputText.value.trim()
  })

  // 清空输入框
  inputText.value = ''

  // 模拟自动回复
  setTimeout(() => {
    messages.value.push({
      sender: 'ai',
      text: `你问的是：“${inputText.value}”，我可以帮你解答...`
    })
  }, 600)
  console.log(inputText.value)
}

// 自动滚动到底部
const scrollToBottom = () => {
  nextTick(() => {
    const container = document.querySelector('.messages')
    if (container) {
      container.scrollTop = container.scrollHeight
    }
  })
}
</script>

<style scoped>
.app-container {
  display: flex;
  height: 100vh; /* 让容器占满整个视口高度 */
}

.main-content {
  flex: 1; /* 主内容区自动填充剩余空间 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #1e1e2f;
  color: #ffffff;
  font-family: 'Segoe UI', sans-serif;
  padding: 1rem;
  box-sizing: border-box;
}

.messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: 8px;
  background-color: #2a2a3d;
  margin-bottom: 1rem;
}

.message {
  display: flex;
  align-items: start;
  gap: 1rem;
  //max-width: 80%;
}

/* AI 客服消息：左对齐 */
.message.ai {
  align-self: flex-start;
  flex-direction: row; /* 默认值，可不写 */
}

/* 用户消息：右对齐 + 反转顺序 */
.message.user {
  align-self: flex-end;
  flex-direction: row-reverse; /* 头像在右边 */
}

.auto-break {
  width: 40rem;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-all;
}

.avatar {
  font-size: 1.2rem;
  min-width: 2rem;
}

.content {
  background-color: #3c3c54;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  white-space: pre-wrap;
}

.input-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  background-color: #2a2a3d;
  padding: 0.5rem;
  border-radius: 8px;
}

textarea {
  flex: 1;
  resize: none;
  background-color: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 1rem;
  line-height: 1.4;
  min-height: 24px;
  max-height: 120px;
  overflow-y: auto;
  padding: 0.5rem;
}

button {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #369c6b;
}

button:disabled {
  background-color: #666;
  cursor: not-allowed;
}
</style>